<template>
    <div class="table-page">
        <div
            class="table-search-box"
            @keyup.enter="search()"
        >
            <div class="search-item">
                <label>考试名称：</label>
                <div class="table-query-input">
                    <el-input
                        v-model="queryData.examName"
                        clearable
                        placeholder="考试名称"
                    ></el-input>
                </div>
            </div>

            <div class="search-item">
                <label>行业分类：</label>
                <el-select
                    placeholder="行业分类"
                    @change="choseSearchExam"
                    clearable
                    v-model="queryData.industryId"
                >
                    <el-option
                        v-for="item in industryOptions"
                        :key="item.name"
                        :label="item.name"
                        :value="item.id"

                    >
                    </el-option>
                </el-select>
            </div>
            <div class="search-item">
                <label>所属考试：</label>
                <el-select
                    v-model="queryData.examId"
                    placeholder="考试"
                    filterable
                    clearable
                    reserve-keyword
                >
                    <el-option
                        v-for="item in examOptions"
                        :key="item.name"
                        :label="item.name"
                        :value="item.id"
                    >
                    </el-option>
                </el-select>
            </div>

            <div class="search-item">
                <label>考试日期  ：</label>
                <el-date-picker
                    v-model="queryData.startTime"
                    type="date"
                    placeholder="选择日期">
                </el-date-picker>
            </div>
            <div class="search-item">
                <label class="minWidthClear">至：</label>
                <el-date-picker
                    v-model="queryData.endTime"
                    type="date"
                    placeholder="选择日期">
                </el-date-picker>
            </div>
            <div class="search-item">
                <el-button
                    type="primary"
                    icon="el-icon-search"
                    :loading="tableLoading"
                    @click="clickSearch()"
                >搜索
                </el-button>
            </div>
            <div class="search-item">
                <el-button
                    icon="el-icon-refresh"
                    :loading="tableLoading"
                    @click="calendarResetSearch()"
                >重置
                </el-button>
            </div>
        </div>

        <div class="table-operation-box">
            <el-button
                type="primary"
                style="margin-bottom: 2em"
                @click="clickCategory()"
            >新增考试日历
            </el-button>
        </div>

        <div class="table-data-box">
            <el-table
                ref="table"
                v-loading="tableLoading"
                :data="tableData"
                border
                style="width: 100%;min-height:40em"
                row-key="id"
                @selection-change="tableSelectionChange"
            >
                <el-table-column
                    type="selection"
                    width="55"
                    align="center"
                >
                </el-table-column>

                <el-table-column
                    prop="examName"
                    label="考试名称"
                    width="120"
                >
                </el-table-column>
                <el-table-column
                    prop="industryName"
                    label="所属行业"
                    min-width="100"
                >
                </el-table-column>
                <el-table-column
                    prop="categoryName"
                    label="所属科目"
                    min-width="100"
                >
                </el-table-column>
                <el-table-column
                    prop="examDate"
                    label="考试日期"

                    width="120">
                </el-table-column>
                <el-table-column
                    prop="registrationDate"
                    label="报名时间"

                    width="120">
                </el-table-column>

                <el-table-column
                    prop="checkScoreDate"
                    label="成绩查询时间"
                    min-width="100"
                >
                </el-table-column>

                <el-table-column
                    prop="modifyName"
                    label="修改人"
                    min-width="100"
                >
                </el-table-column>
                <el-table-column
                    prop="modifyTime"
                    label="修改时间"
                    min-width="100"
                >
                </el-table-column>

                <el-table-column
                    label="操作"
                    width="260"
                    align="center"
                    fixed="right"
                >
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            icon="el-icon-edit"
                            size="mini"
                            :loading="scope.row.opLoading"
                            @click="clickEdit(scope.row)"
                        >编辑
                        </el-button>
                        <el-button
                            v-if="!scope.row.edit"
                            class="danger"
                            type="text"
                            icon="el-icon-delete"
                            size="mini"
                            :loading="scope.row.opLoading"
                            @click="
                                tableDelete(
                                    '/exam/calendar/delete',
                                    {
                                        id: scope.row.id
                                    },
                                    true
                                )
                            "
                        >删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <div v-if="pageData.total" class="xy-between table-page-box">
            <el-pagination
                background
                :current-page.sync="pageData.currentPage"
                :page-sizes="pageData.pageSizes"
                :page-size.sync="pageData.pageSize"
                layout="total,  prev, pager, next, sizes, jumper"
                :total="pageData.total"
            >
            </el-pagination>
        </div>
        <el-dialog
            :title="dialogFormTitle"
            :visible.sync="dialogFormVisible"
            custom-class="one-dialog"
        >
            <el-form
                ref="dataForm"
                :inline="true"
                :model="dataForm"
                label-width="8em"
                :rules="dataFormRule"
                class="table-edit-from"
            >
                <el-form-item
                    label="行业分类"
                    prop="industryId"
                >
                    <el-select
                        placeholder="行业分类"
                        clearable
                        v-model="dataForm.industryId"
                        @change="dataFormClear"
                    >
                        <el-option
                            v-for="item in industryOptions"
                            :key="item.name"
                            :label="item.name"
                            :value="item.id"

                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item
                    label="考试"
                    prop="examId"
                >
                    <el-select
                        v-model="dataForm.examId"
                        placeholder="考试"
                        filterable
                        reserve-keyword
                        @change="dataFormExamClear"
                    >
                        <el-option
                            v-for="item in showExamOptions"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item
                    label="所属科目"
                    prop="categoryId"
                >
                    <el-select
                        v-model="dataForm.categoryId"
                        placeholder="科目"

                    >
                        <el-option
                            v-for="item in showCategoryOptions"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item
                    label="考试日期"
                    prop="examDate"
                >
                    <el-date-picker
                        v-model="dataForm.examDate"
                        type="date"
                        placeholder="选择日期"
                        value-format="yyyy-MM-dd"
                        :picker-options="timeChange"
                    >
                    </el-date-picker>
                </el-form-item>
                <el-form-item
                    label="报名时间"
                    prop="registrationDate"
                >
                    <el-date-picker
                        v-model="dataForm.registrationDate"
                        type="date"
                        placeholder="选择日期"
                        value-format="yyyy-MM-dd"
                        :picker-options="timeChange"
                    >
                    </el-date-picker>
                </el-form-item>
                <el-form-item
                    label="成绩查询时间"
                    prop="checkScoreDate"
                >
                    <el-input
                        v-model="dataForm.checkScoreDate"
                        type="text"
                    ></el-input>
                </el-form-item>

            </el-form>

            <span
                slot="footer"
                class="dialog-footer"
            >
        <el-button
            :loading="submitFlag"
            @click="dialogClose"
        >取 消</el-button>
        <el-button
            v-show="!addOrUpdateflag"
            :loading="submitFlag"
            type="primary"
            @click="recordSave(dataForm)"
        >保 存</el-button>
        <el-button
            v-show="addOrUpdateflag"
            :loading="submitFlag"
            type="primary"
            @click="recordSave(dataForm)"
        >新增</el-button>
      </span>
        </el-dialog>
        <el-dialog
            title="新增日历"
            :visible.sync="addDialogFormVisible"
            @close="closeDialog"
        >
            <el-form
                ref="dataForm"
                :inline="true"
                :model="examInfo"
                label-width="8em"
                :rules="dataFormRule"
            >

                <el-form-item
                    label="行业分类"
                    prop="industryId"
                >
                    <el-select
                        placeholder="行业分类"
                        @change="dialogChoseExam"
                        clearable
                        v-model="examInfo.industryId"

                    >
                        <el-option
                            v-for="item in industryOptions"
                            :key="item.name"
                            :label="item.name"
                            :value="item.id"

                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item
                    label="考试"
                    prop="examId"
                >
                    <el-select
                        @change="choseCategory"
                        v-model="examInfo.examId"
                        placeholder="考试"
                        filterable
                        reserve-keyword
                    >
                        <el-option
                            v-for="item in examOptions"
                            :key="item.name"
                            :label="item.name"
                            :value="item.id"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>

                <div style="height: 43px">
                    <el-button
                        type="primary"
                        style="margin-bottom: 2em ;margin-left: 2px"
                        class="el-icon-plus"
                        @click="showAddCalendar()"
                    >添加信息
                    </el-button>
                </div>
                <!--                    ref="table"-->
                <el-table
                    v-loading="tableLoading"
                    :data="examCalendarInfo"
                    border
                    style="width: 100%;min-height:40em"
                    row-key="id">
                    <el-table-column
                        prop="categoryName"
                        label="所属科目"
                        min-width="100"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="examDate"
                        label="考试日期"
                        min-width="100"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="registrationDate"
                        label="报名时间"
                        min-width="100"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="checkScoreDate"
                        label="成绩查询时间"
                        min-width="100"
                    >
                    </el-table-column>
                    <el-table-column
                        label="操作"
                        width="260"
                        align="center"
                        fixed="right"
                    >
                        <template slot-scope="scope">
                            <el-button
                                type="text"
                                icon="el-icon-edit"
                                size="mini"
                                :loading="scope.row.opLoading"
                                @click="showUpdateCalendar(scope.row)"
                            >编辑
                            </el-button>
                            <el-button
                                v-if="!scope.row.edit"
                                class="danger"
                                type="text"
                                icon="el-icon-delete"
                                size="mini"
                                :loading="scope.row.opLoading"
                                @click=" deleteCalendar(scope.row.id) "
                            >删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form>
            <span
                slot="footer"
                class="dialog-footer"
            >

      </span>
        </el-dialog>
        <el-dialog
            :visible.sync="infoDialog"
            custom-class="one-dialog">
            <el-form
                ref="dataForm"
                :inline="true"
                :model="calenderInfo"
                label-width="8em"
                :rules="dataFormRule"
                class="table-edit-from">
                <el-form-item
                    label="考试日期"
                    prop="examDate"
                >
                    <el-date-picker
                        v-model="calenderInfo.examDate"
                        type="date"
                        placeholder="选择日期"
                        value-format="yyyy-MM-dd"
                        :picker-options="timeChange"
                    >
                    </el-date-picker>
                </el-form-item>
                <el-form-item
                    label="所属科目"
                    prop="categoryId"
                >
                    <el-select
                        placeholder="选择科目"
                        clearable
                        v-model="calenderInfo.categoryId"
                        :multiple="!calenderInfo.id"

                    >
                        <el-option
                            v-for="item in categoryOptions"
                            :key="item.name"
                            :label="item.name"
                            :value="item.id"

                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item
                    label="报名时间"
                    prop="registrationDate"
                >
                    <el-date-picker
                        v-model="calenderInfo.registrationDate"
                        type="date"
                        placeholder="选择日期"
                        value-format="yyyy-MM-dd"
                        :picker-options="timeChange"

                    >
                    </el-date-picker>
                </el-form-item>
                <el-form-item
                    label="成绩查询时间"
                    prop="checkScoreDate"
                >
                    <el-input
                        v-model="calenderInfo.checkScoreDate"
                        type="text"
                    ></el-input>
                </el-form-item>
            </el-form>
            <span
                slot="footer"
                class="dialog-footer"
            >

        <el-button
            v-show="!addOrUpdateflag"
            :loading="submitFlag"
            type="primary"
            @click="updateCalendar()"
        >保 存</el-button>

      </span>
        </el-dialog>
    </div>
</template>

<script>
import {TablePage} from "@/layout/mixin/iVue.js";
import {mapState} from "vuex";
import resourceShow from "@/components/resource/resourceShow";
import {get, post, put} from "@/api/request";

export default {
    name: "ExamCalendar",
    components: {
        resourceShow
    },
    mixins: [TablePage],
    async asyncData(context) {
        return Promise.resolve().then(() => {
            const {app, query} = context;
            this.courseId = context.route.query.courseId;
            console.log("courseId", this.courseId);
        });
    },
    data() {
        return {
            queryData: {examId: null},
            examCalendarInfo: [],
            calenderInfo: {},
            addDialogFormVisible: false,
            infoDialog: false,
            examInfo: {examId: null},
            industryOptions: [],
            categoryOptions: [],
            examOptions: [],
            showExamOptions: [],
            showCategoryOptions: [],

            timeChange: {
                disabledDate(time) {
                    return time.getTime() < Date.now() - 8.64e7;
                }
            },
            initAddForm: {
                id: null,
                name: null,
                remark: null
            },
            actions: null,
            addOrUpdateflag: false,
            dataFormRule: {
                examDate: [
                    {required: true, message: "请输入考试时间", trigger: "blur"}
                ]
                , industryId: [
                    {required: true, message: "请选择行业", trigger: "blur"}
                ], examId: [
                    {required: true, message: "请选择考试", trigger: "blur"}
                ]
            }
        };
    },
    computed: {
        ...mapState({
            status: state => state.status.roleSystem
        })
    },
    watch: {
        actionSearch(val) {
            this.$refs.tree.filter(val);
        },
        "dataForm.industryId"(industryId) {
            if (industryId) {
                this.choseExam(industryId);
            } else {
                this.showExamOptions = [];
            }
        },
        "dataForm.examId"(examId) {
            if (examId) {
                this.choseCategoryByExamId(examId);
            } else {
                this.showCategoryOptions = [];
            }
        },

    },
    created() {
        this.getIndustryOptions();

    },
    methods: {
        // formatE(row){
        //     var i = new Date(row.examDate).getTime();
        //     var b = new Date().getTime();
        //     if(i>b) return row.examDate;
        //     return "--"
        // },
        // formatR(row){
        //
        //     return ""
        // },
        closeDialog() {
            this.calenderInfo = {}
            this.examInfo = {}
            this.examCalendarInfo = []
            this.search()
        },
        dataFormClear(){
            this.dataForm.examId=null;
            this.dataForm.categoryId=null;
        },
        dataFormExamClear(){
            this.dataForm.categoryId=null;
        },
        showUpdateCalendar(row) {
            this.infoDialog = true;
            this.calenderInfo = row

        },
        showAddCalendar() {
            this.infoDialog = true;
            this.calenderInfo = {}
        },
        updateCalendar() {
            if (this.examInfo.examId === undefined || this.examInfo.industryId === undefined ) {
                this.$message.error("请填写行业、考试")
                return
            }
            if (this.calenderInfo.examDate === undefined) {
                this.$message.error("考试日期必填")
                return;
            }
            var examCalendarForm = {}
            examCalendarForm.examId = this.examInfo.examId
            examCalendarForm.industryId = this.examInfo.industryId
            examCalendarForm.examDate = this.calenderInfo.examDate
            examCalendarForm.registrationDate = this.calenderInfo.registrationDate
            examCalendarForm.checkScoreDate = this.calenderInfo.checkScoreDate
            examCalendarForm.categoryId = this.calenderInfo.categoryId
            if (this.calenderInfo.id) {
                examCalendarForm.id = this.calenderInfo.id
                put("/exam/calendar/update", examCalendarForm).then(res => {
                    this.examCalendarInfo.forEach(e => {
                        if (res.id === e.id) {
                            e.categoryName=res.categoryName
                            e.examDate = this.calenderInfo.examDate
                            e.registrationDate = this.calenderInfo.registrationDate
                            e.checkScoreDate = this.calenderInfo.checkScoreDate
                        }
                    })

                    this.infoDialog = false
                    this.$message({
                        message: "修改成功",
                        type: "success"
                    });
                })

            } else {
                examCalendarForm.id = null
                delete examCalendarForm.categoryId
                examCalendarForm.categoryIds = this.calenderInfo.categoryId
                post("/exam/calendar/updateExamCalendars", examCalendarForm).then(res => {
                    res.forEach(r=>{
                        let temp={...examCalendarForm}
                        temp.id = r.id
                        temp.categoryName=r.categoryName
                        temp.categoryId=r.categoryId
                        this.examCalendarInfo.push(temp)
                    })
                    console.log(this.examCalendarInfo)
                    this.infoDialog = false
                    this.$message({
                        message: "添加成功",
                        type: "success"
                    });
                })
            }

        },
        deleteCalendar(id) {
            var delExam = this.examCalendarInfo
            this.tableDelete(
                "/exam/calendar/delete",
                {
                    id: id
                },
                true,
                function () {
                    delExam.forEach(function (item, index, arr) {
                        if (id === item.id) {
                            arr.splice(index, 1);
                        }
                    })
                }
            )

        },
        /*      async batchDelete () {
                await this.$confirm("确定删除这些资源吗？", "提示", {
                  confirmButtonText: "确定",
                  cancelButtonText: "取消",
                  type: "warning"
                })
                  .then(() => {
                    fetchDelete("/course/resources/batch-delete", { ids: this.tableSelect }).then(res => {
                      this.search()
                    })

                  }).catch(() => {
                    this.$message({
                      type: 'info',
                      message: '已取消删除'
                    });
                  });
                ;
              }
              ,*/
        calendarResetSearch() {
            // this.getExamOptions();
            this.examOptions = []
            this.resetSearch()
        },
        choseExam(industryId) {
            get("/exam/exam/exam-by-industryId", {"industryId": industryId, "size": 1000}).then(res => {
                this.showExamOptions = res
            });
        },
        choseCategoryByExamId(examId) {
            console.log("change")
            get("/exam/category/list", {"examId": examId, "size": 1000}).then(res => {
                this.showCategoryOptions = res;
            });
        },
        dialogChoseExam() {
            this.examInfo.examId = null
            get("/exam/exam/exam-by-industryId", {"industryId": this.examInfo.industryId, "size": 1000}).then(res => {
                this.examOptions = res;
            });
        },
        choseCategory() {
            console.log("chose")
            get("/exam/category/list", {"examId":this.examInfo.examId,"size": 1000}).then(res => {
                this.categoryOptions = res;
            });
        },
        choseSearchExam() {
            this.queryData.examId = null
            get("/exam/exam/exam-by-industryId", {"industryId": this.queryData.industryId, "size": 1000}).then(res => {
                this.examOptions = res;
            });
        },
        getIndustryOptions() {
            get("/exam/industry/list", {"size": 1000}).then(res => {
                this.industryOptions = res;
            });
        },
        clickEdit(val) {
            this.addOrUpdateflag = false;
            this.clickSimpleEdit(val, "考试日历编辑");
        },
        clickCategory() {
            // this.addOrUpdateflag = true;
            this.addDialogFormVisible = true
        },

        search() {
            this.loadTable("/exam/calendar/page", this.queryData);
        },
        recordSave(dataForm) {
            this.$refs["dataForm"].validate((valid) => {
                if (!valid) {
                    console.log("error submit!!");
                    return false;
                }
            });
            console.log("===")
            this.formDataSave("/exam/calendar/update").then(res => {

            });
            /*this.dataForm.addAction
                ? post("/course/article/category/update", dataForm).then(
                    res => {
                        console.log("post");
                        (this.dialogFormVisible = false), this.search();
                    }
                )
                : put("/course/article/category/update", dataForm).then(res => {
                    console.log("put");
                    (this.dialogFormVisible = false), this.search();
                });*/
        }
    }
};
</script>

<style lang="scss" scoped>
.top {
    width: 100%;
    height: 100%;
    //   background: red;
    display: flex;
    flex-direction: column;
}

.action-bar {
    width: 100%;
    height: 60px;
    border-bottom: 1px;
    //   background: pink;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.action-bar-add {
    width: 100px;
    height: 50px;
    border-bottom: 1px;
    //   background: rgb(170, 129, 136);
    display: flex;
    align-items: center;
    justify-content: center;
}

.action-bar-group {
    width: 160px;
    height: 50px;
    border-bottom: 1px;
    //   background: rgb(158, 120, 126);
    display: flex;
    align-items: center;
    justify-content: center;
}

.action-list {
    width: 100%;
    height: 380px;
    border-bottom: 1px;
    //   background: rgb(167, 123, 130);
    display: flex;
    flex-direction: column;
}

.action-bottom {
    width: 100%;
    height: 60px;
    border-bottom: 1px;
    //   background: rgb(131, 154, 228);
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

.action-bottom-upload {
    width: 160px;
    height: 50px;
    border-bottom: 1px;
    //   background: rgb(170, 129, 136);
    display: flex;
    align-items: center;
    justify-content: center;
}

.action-list-top {
    width: 100%;
    height: 52px;
    border-bottom: 1px;
    //   background: rgb(167, 123, 130);
    display: flex;
}

.action-list-middle {
    width: 100%;
    height: 300px;
    //   border-bottom: 1px;
    //   background: rgb(167, 123, 130);
    display: flex;
    flex-direction: column;
}

.action-list-form {
    width: 100%;
    height: 38px;
    border-bottom: 1px;
    //   background: rgb(167, 123, 130);
}

.action-column {
    width: 100%;
    height: 30px;
    border-bottom: 1px;
    //   background: rgb(167, 123, 130);
    display: flex;
    flex-direction: row;
}

.action-column-item {
    width: 100%;
    height: 50px;
    //   background: rgb(167, 123, 130);
    display: flex;
    flex-direction: row;
    text-align: center;
    align-items: center;
    justify-content: space-between;
    border-right: 1px solid #dfe6ec;
    border-bottom: 1px solid #dfe6ec;
    border-top: 1px solid #dfe6ec;
}

.action-check {
    width: 20%;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.form-item {
    width: 14%;
    height: 62%;
    border-right: 1px solid #dfe6ec;
    //   background: red;
    display: flex;
    flex-direction: row;
    margin: 0 auto;
    text-align: center;
    // align-items: center;
    //   border-bottom: 1px solid #dfe6ec;
}

.form-item-name {
    width: 16%;
    height: 62%;
    border-right: 1px solid #dfe6ec;
    //   background: red;
    display: flex;
    flex-direction: row;
    margin: 0 auto;
    text-align: center;
    // align-items: center;
    //   border-bottom: 1px solid #dfe6ec;
}

.form-item-progress {
    width: 8%;
    height: 78%;
    border-right: 1px solid #dfe6ec;
    //   background: red;
    display: flex;
    flex-direction: row;
    margin: 0 auto;
    text-align: center;
    // align-items: center;
    //   border-bottom: 1px solid #dfe6ec;
}

.el-form-item--mini .el-form-item__content {
    line-height: 37px !important;
}

.form-preview-pdf {
    width: 980px;
    height: 780px;
}

.form-preview-img {
    width: 160px;
    height: 160px;
}

.widthImg {
    width: 40%;
    height: 60%;
    display: flex;
    justify-content: center;
}

.widthPdf {
    width: 60%;
    height: 60%;
    display: flex;
    justify-content: center;
}

.update-form-item {
    width: 380px;
    //   margin-left: 20px;
    display: flex;
    flex-wrap: wrap;
}

.update-forms {
    width: 1200px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    //   justify-content: space-between;
}

.resourceShow {
    width: 60%;
    height: 60%;
}

// 文件预览弹框
.filePreviewDiolog {
    ::v-deep .el-dialog {
        border-radius: 0.5rem;
        min-height: 21rem;

        .el-dialog__header {
            padding-bottom: 5px;
            padding-top: 10px;
            display: flex;
            align-items: center;
            position: relative;

            .el-dialog__headerbtn {
                position: absolute;
                top: 0.583333rem;
            }

            .el-dialog__title {
                font-size: 0.583333rem;
                color: #32353a;
            }
        }

        .el-dialog__body {
            position: relative;
            padding-top: 0.833333rem;
            padding-bottom: 20px;

            .the-divider {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 1px;
                background: #e5e8ec;
            }

            .text {
                .middle-text {
                    margin-top: 1.25rem;
                    margin-bottom: 0.416667rem;
                }

                .light-text {
                    i {
                        font-size: 0.416667rem;
                        color: #ff4751;
                        margin-right: 0.208333rem;
                    }

                    p {
                        margin-bottom: 0.416667rem;
                    }
                }
            }
        }

        .el-dialog__footer {
            display: flex;
            justify-content: center;

            .el-button {
                margin-bottom: 0.416667rem;
            }
        }
    }

    ::v-deep .el-icon-close:before {
        content: '\e68f';
        font-family: 'iconfont' !important;
        color: #babfcb;
    }

    .primaryInfo {
        display: flex;
        height: calc(70vh - 3rem);

        .infoLeft {
            padding-right: 0.833333rem;
            margin-right: 1.25rem;
            padding-bottom: 0.416667rem;
            border-right: 1px solid #32353a;

            .vedio {
                // max-width: 33.333333rem;
                background-color: #fff;
                min-width: 35rem;
                border-radius: 0.5rem;
                margin-top: 0.833333rem;
                margin-bottom: 0.833333rem;
                overflow: hidden;
            }

            .left_bottom_text {
                position: relative;
                width: 100%;
                height: 0.83rem;

                .preHidden {
                    visibility: hidden;
                }

                .nextBtn {
                    position: absolute;
                    right: 0;
                }
            }
        }

        .right {
            width: 100%;
            position: relative;

            .ProfileName {
                margin-top: 0.333333rem;
                margin-bottom: 1.25rem;

                .el-input__inner {
                    width: 100% !important;
                    border: 1px solid #dddddd;
                }
            }

            .el-button {
                width: 86px;
                height: 34px;
                border-radius: 6px;
                padding: 0;
                border: 1px solid #32353a;
                margin-top: 30px;
                bottom: 10px;
                position: relative;
            }

            .primary {
                background-color: #ff4751;
                color: #fff;
                border: none;
            }

            .btn {
                width: 100%;
                height: 34px;
                display: flex;
                justify-content: center;
                position: absolute;
                bottom: 1.5rem;

                .primary {
                    margin-right: 1.25rem;
                }
            }

            .updataInfo {
                .updataText {
                    margin-bottom: 0.333333rem;
                }
            }

            .isLearnTrue {
                .f-c-868EA1 {
                    margin-bottom: 0.333333rem;
                }
            }

            .AllowDownTrue {
                margin-top: 1.25rem;

                .f-c-868EA1 {
                    margin-bottom: 0.333333rem;
                }
            }

            .learnRequireTrue {
                margin-top: 1.25rem;
                width: 100%;

                .f-c-868EA1 {
                    margin-bottom: 0.333333rem;
                }

                ::v-deep .ResourceTextarea {
                    resize: none !important;
                    width: 100%;

                    .el-textarea__inner {
                        border: 1px solid #dddddd;
                        height: 4.416667rem;
                    }
                }
            }

            .fileName {
                width: 100%;
            }

            ::v-deep .el-radio__inner {
                border: 1px solid #dddddd !important;
            }
        }
    }

    .primaryInfo {
        display: flex;
        height: calc(70vh - 3rem);

        .infoLeft {
            padding-right: 0.833333rem;
            margin-right: 1.25rem;
            padding-bottom: 0.416667rem;
            border-right: 1px solid #32353a;

            .vedio {
                // max-width: 33.333333rem;
                background-color: #fff;
                min-width: 35rem;
                border-radius: 0.5rem;
                margin-top: 0.833333rem;
                margin-bottom: 0.833333rem;
                overflow: hidden;
            }

            .left_bottom_text {
                position: relative;
                width: 100%;
                height: 0.83rem;

                .preHidden {
                    visibility: hidden;
                }

                .nextBtn {
                    position: absolute;
                    right: 0;
                }
            }
        }

        .right {
            width: 100%;
            position: relative;

            .ProfileName {
                margin-top: 0.333333rem;
                margin-bottom: 1.25rem;

                .el-input__inner {
                    width: 100% !important;
                    border: 1px solid #dddddd;
                }
            }

            .el-button {
                width: 86px;
                height: 34px;
                border-radius: 6px;
                padding: 0;
                border: 1px solid #32353a;
                margin-top: 30px;
                bottom: 10px;
                position: relative;
            }

            .primary {
                background-color: #ff4751;
                color: #fff;
                border: none;
            }

            .btn {
                width: 100%;
                height: 34px;
                display: flex;
                justify-content: center;
                position: absolute;
                bottom: 1.5rem;

                .primary {
                    margin-right: 1.25rem;
                }
            }

            .updataInfo {
                .updataText {
                    margin-bottom: 0.333333rem;
                }
            }

            .isLearnTrue {
                .f-c-868EA1 {
                    margin-bottom: 0.333333rem;
                }
            }

            .AllowDownTrue {
                margin-top: 1.25rem;

                .f-c-868EA1 {
                    margin-bottom: 0.333333rem;
                }
            }

            .learnRequireTrue {
                margin-top: 1.25rem;
                width: 100%;

                .f-c-868EA1 {
                    margin-bottom: 0.333333rem;
                }

                ::v-deep .ResourceTextarea {
                    resize: none !important;
                    width: 100%;

                    .el-textarea__inner {
                        border: 1px solid #dddddd;
                        height: 4.416667rem;
                    }
                }
            }

            .fileName {
                width: 100%;
            }

            ::v-deep .el-radio__inner {
                border: 1px solid #dddddd !important;
            }
        }
    }
}
</style>
